<template>
    <div class="container">
        <el-container>
            <el-aside class="app-side app-side-left" :class="isCollapse ? 'app-side-collapsed' : 'app-side-expanded'">
                <!-- 左上logo -->
                <div class="app-side-logo">
                    <img src="@/assets/logo.png" :width="isCollapse?'60':'60'" height="60">
                </div>
                <!-- 菜单开始 -->
                <div>
                    <el-menu dafault-active="1-4-1"
                        class="el-menu-vertical"
                         @open="handleOpen"
                         :collapse="isCollapse">
                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span slot="title">导航一</span>
                            </template>
                            <el-menu-item-group>
                                <span slot="title">分组一</span>
                                <el-menu-item index="1-1">选项1</el-menu-item>
                                <el-menu-item index="1-2">选项2</el-menu-item>
                            </el-menu-item-group>
                            <el-menu-item-group title="分组2">
                                <el-menu-item index="1-3">选项3</el-menu-item>
                            </el-menu-item-group>
                            <el-submenu index="1-4">
                                <span slot="title">选项4</span>
                                <el-menu-item index="1-4-1">选项1</el-menu-item>
                            </el-submenu>
                        </el-submenu>
                        <el-menu-item index="2">
                            <i class="el-icon-menu"></i>
                            <span slot="title">导航二</span>
                        </el-menu-item>
                        <el-menu-item index="3"
                                      disabled>
                            <i class="el-icon-document"></i>
                            <span slot="title">导航三</span>
                        </el-menu-item>
                        <el-menu-item index="4">
                            <i class="el-icon-setting"></i>
                            <span slot="title">导航四</span>
                        </el-menu-item>
                    </el-menu>
                </div>
            </el-aside>
            <el-container>
                <el-header class="app-header">
                    <div style="width: 60px; cursor: pointer;"
                         @click.prevent="toggleSideBar">
                        <i v-show="!isCollapse" class="el-icon-d-arrow-left"></i>
                        <i v-show="isCollapse" class="el-icon-d-arrow-right"></i>
                    </div>
                    <!-- 我是样例菜单 -->
                    <el-menu default-active="1"
                             class="el-menu-demo tab-page"
                             mode="horizontal"
                             @select="handleSelect"
                             active-text-color="#409EFF">
                        <el-menu-item index="1">处理中心</el-menu-item>
                        <el-submenu index="2">
                            <template slot="title">我的工作台</template>
                            <el-menu-item index="2-1">选项1</el-menu-item>
                            <el-menu-item index="2-2">选项2</el-menu-item>
                            <el-menu-item index="2-3">选项3</el-menu-item>
                            <el-submenu index="2-4">
                                <template slot="title">选项4</template>
                                <el-menu-item index="2-4-1">选项1</el-menu-item>
                                <el-menu-item index="2-4-2">选项2</el-menu-item>
                                <el-menu-item index="2-4-3">选项3</el-menu-item>
                            </el-submenu>
                        </el-submenu>
                        <el-menu-item index="3"
                                      disabled>消息中心</el-menu-item>
                        <el-menu-item index="4">
                            <a href="#">订单管理</a>
                        </el-menu-item>
                    </el-menu>
                    <div class="app-header-userinfo">
                        <el-dropdown trigger="hover" :hide-on-click="false">
                            <span class="el-dropdown-link">
                                {{ username }}
                                <i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>我的消息</el-dropdown-item>
                                <el-dropdown-item>设置</el-dropdown-item>
                                <el-dropdown-item divided
                                                  @click.native="logout">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </el-header>
                <el-main class="app-body">
                    <template>
                        <router-view/>
                    </template>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
  export default {
    name: "Container",
    data(){
      return {
        username: '',
        isCollapse: false
      }
    },
    methods: {
      toggleSideBar(){
        this.isCollapse = !this.isCollapse
      },
      logout(){
        this.$confirm('确认退出?', '', {})
          .then(()=>{
            sessionStorage.removeItem('user')
            this.$router.push({path:'/login'})
          })
          .catch(()=>{})
      },
      handleOpen(key, keyPath){
        console.log(key,keyPath)
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
    },
    mounted: function () {
      let user = sessionStorage.getItem('user');
      if (user) {
        this.username = user;
      }
    }
  }
</script>

<style scoped>

</style>